<script setup>
const props = defineProps({
  title: {
    type: String,
  },
  tableData: {
    type: Object,
  },
  replaceFiled: {
    type: Object,
    default: {
      title: "title",
      class: "class",
    },
  },
});
</script>
<template>
  <div class="table-box">
    <div class="title">{{ title }}</div>
    <div class="table">
      <ul>
        <li v-for="(item, index) in tableData" :key="index">
          <div class="table-title">{{ item[replaceFiled.title] }}</div>
          <div class="table-class">{{ item[replaceFiled.class] }}</div>
        </li>
      </ul>
    </div>
  </div>
</template>
<style lang="less" scoped>
.table-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin:30px;
}
.title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 15px;
}
.table {
  width: 78%;
  ul {
    li {
      display: flex;
      flex-direction: row;
      align-items: center;
      padding: 20px;
      position:relative;
      .table-title{
        width:20%;
        text-align: center;
      }
      .table-class{
        width:78%;
        word-break: break-all;
      }
    }
    li::before {
      content: "";
      position:absolute;
      left:4%;
      top:0;
      height:100%;
      width: 5px;
      background-color: #c2c9ca;
    }
    li:nth-child(odd) {
      background-color: aliceblue;
    }
  }
}
</style>
